<template>
  <el-form
    style="padding-top: 20px"
    :model="models"
    :rules="rules"
    ref="form1"
    label-width="150px"
    class="demo-ruleForm"
  >
    <el-row>
      <el-col :span="11">
        <el-form-item label="名称：" prop="model.name">
          <el-input v-model="models.model.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="UI：" prop="model.ui">
          <el-select v-model="models.model.ui" required>
            <el-option value="element" label="ElementUI（PC端）"></el-option>
            <el-option value="framework7" label="Framework7（移动端）"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="图片Base64：" prop="model.icon">
          <el-input
            type="textarea"
            v-model="models.model.icon"
            :autosize="{ minRows: 2, maxRows: 4}"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="页面JSON：" prop="model.designData">
          <el-input
            type="textarea"
            v-model="models.model.designData"
            :autosize="{ minRows: 2, maxRows: 4}"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="样式代码：" prop="model.styleCode">
          <el-input
            type="textarea"
            v-model="models.model.styleCode"
            :autosize="{ minRows: 2, maxRows: 4}"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="JS代码：" prop="model.jsCode">
          <el-input
            type="textarea"
            v-model="models.model.jsCode"
            :autosize="{ minRows: 2, maxRows: 4}"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="Vue方法：" prop="model.vueMethod">
          <el-input
            type="textarea"
            v-model="models.model.vueMethod"
            :autosize="{ minRows: 2, maxRows: 4}"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="监听属性：" prop="model.watchProp">
          <el-input
            type="textarea"
            v-model="models.model.watchProp"
            :autosize="{ minRows: 2, maxRows: 4}"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="引入CSS：" prop="model.importCss">
          <el-input
            type="textarea"
            v-model="models.model.importCss"
            :autosize="{ minRows: 2, maxRows: 4}"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="引入JS：" prop="model.importJs">
          <el-input
            type="textarea"
            v-model="models.model.importJs"
            :autosize="{ minRows: 2, maxRows: 4}"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="是否删除：" prop="model.isDeleted">
          <el-select v-model="models.model.isDeleted" required>
            <el-option :value="0" label="否">否</el-option>
            <el-option :value="1" label="是">是</el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="保留字段1：" prop="model.reserved1">
          <el-input v-model="models.model.reserved1"></el-input>
        </el-form-item>
        <el-form-item label="保留字段2：" prop="model.reserved2">
          <el-input v-model="models.model.reserved2"></el-input>
        </el-form-item>
        <el-form-item label="保留字段3：" prop="model.reserved3">
          <el-input v-model="models.model.reserved3"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "smartform-template-create",
  props: {
    models: Object,
    controlData: Object,
  },
  data() {
    return {
      rules: {
        "model.name": [
          { required: true, message: "请输入名称", trigger: "change" },
        ],
        "model.ui": [
          { required: true, message: "请选择UI", trigger: "change" },
        ],
        "model.icon": [
          { required: true, message: "请输入图片Base64", trigger: "change" },
        ],
        "model.designData": [
          { required: true, message: "请输入页面JSON", trigger: "change" },
        ],
        "model.isDeleted": [
          { required: true, message: "请选择是否删除", trigger: "change" },
        ],
      },
    };
  },
  methods: {},
};
</script>

<style scoped>
</style>